/* Structure

    -chooser-container
        -option-chooser
            -option1
                -img
                -p
            -option2
                -img
                -p
    


*/



    /* Layout */
    .chooser-container {
        

        /* Size */
        /* width: 100% needed as it will overflow otherwise */
        max-width: 100vw;
        width: 100%;
        min-height: 100vh;
        height: 100%;

        /* Position */
        position: absolute;
        z-index: 1;

        /* Grid */
        display: grid;

        grid-template-columns: 15% 70% 15% ;
        grid-template-rows:  15% auto auto; 
        grid-template-areas:".           header              ."
                            ".          chooser              ."
                            ".           footer              .";

        align-items: center;
        justify-items: center;

    }

    .chooser-container nav {
      
    }

    .option-chooser {
        height: 100%;
        width: 100%;
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: 5fr 5fr ;
        grid-template-rows: 1fr;
        grid-template-areas:
            "option1 option2"
        ;
        align-items: center;
        justify-items: center;
        overflow-x: visible;
        grid-area: chooser;

    }

    .option-chooser-3 {
        max-height: 100%;

        display: grid;
        grid-gap: 2rem;
        grid-template-columns: 5fr 5fr 5fr ;
        grid-template-rows: 1fr;
        grid-template-areas:
            "option1 option2 option3"
        ;
        align-items: center;
        justify-items: center;
        overflow-x: visible;
        grid-area: chooser;

    }

    
    @media (min-width: 650px) {
        .option-chooser-3 {
            height: 100%;
            width: 100%;
        }

        
    }

    @media (max-width: 1350px) {
        .option-chooser-3 a p{
            font-size: 1.5vw;
        }

        
    }

    .option-chooser-3 a {

        height: 80%;
        max-width: 30rem;

        align-content: center;
        justify-content: center;

        display:grid;
        grid-gap: 2rem;
        grid-template-columns: 1fr ;
        grid-template-rows: 2fr 1fr;
        grid-template-areas:
            "img"
            "text"
        ;
        align-items: center;
        justify-items: center;
        overflow-x: hidden;

    }
    
    .chooser-header {
        grid-area: header;
        font-size: 3rem;
    }

    .option-chooser a {

        height: 80%;
        width: 70%;
        max-width: 30rem;

        align-content: center;
        justify-content: center;

        display:grid;
        grid-gap: 2rem;
        grid-template-columns: 1fr ;
        grid-template-rows: 2fr 1fr;
        grid-template-areas:
            "img"
            "text"
        ;
        align-items: center;
        justify-items: center;
        overflow-x: hidden;

    }


    .option1 {
        max-height: 100%;
        max-width: 100%;
        grid-area: option1;
        overflow: hidden;
        
    }


    .option1 img {
        grid-area: img;
        height: 60%;
        width: 60%;

        user-select: none;
    }

    .option1 p {
        grid-area: text;
        text-align: center;
        word-wrap: break-word;
    }

    .option2 {
        grid-area: option2;
        overflow: hidden;
        
    }

    .option2 img {
        grid-area: img;
        height: 60%;
        width: 60%;

        user-select: none;
    }

    .option2 p {
        grid-area: text;
        text-align: center;
        word-wrap: break-word;
    }

    .option3 {
        grid-area: option3;
        overflow: hidden;
        
    }

    .option3 img {
        grid-area: img;
        height: 60%;
        width: 60%;

        user-select: none;
    }

    .option3 p {
        grid-area: text;
        text-align: center;
        word-wrap: break-word;
    }

    footer {
        grid-area: footer;
    }



@media screen and (max-width: 649px){
    .option-chooser {
        height: 100%;
        grid-template-columns: 1fr ;
        grid-template-rows: auto auto auto;
        grid-template-areas:"option1"
                            "option2"
    }

    .option-chooser-3 {
        height: 100%;
        grid-template-columns: 1fr ;
        grid-template-rows: auto auto auto;
        grid-template-areas:"option1"
                            "option2"
                            "option3";
        
    }

    .option-chooser-3 a{
        
    }

    .option-chooser-3 a p{
        font-size: 1rem;
    }
}